<template>
	<view v-if="info">
		<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500">
			<swiper-item class="swiper-item" v-for="(item,index) in info.img.split(',')" :key="index">
				<image mode="aspectFill" :src="item"></image>
			</swiper-item>
		</swiper>
		<view class="info">
			<view class="namebox">{{info.course_name}}</view>
			<view class="infobox">
				<view class="tipbox">报名截止时间</view>
				<view style="color: #555555;" v-if="info">
					{{dateFormat(info.sign_end_time)}}
				</view>
			</view>
			<view style="color: #555555;margin-top: 10rpx;"> 共{{info.class_hour}}课时</view>
		</view>
		<view class="actinfo">
			<view class="adderss">
				<view class="numbox">报名人数</view>
				<view class="numinfo">当前名额剩余<text style="color: #FF8A9B;font-size: 36rpx;">{{info.leave_num}}</text>个
				</view>
			</view>
			<view class="adderss" style="margin-top: 25rpx;">
				<view class="numbox">年龄段</view>
				<view class="numinfo">{{info.start_year}}-{{info.end_year}}</view>
			</view>

			<view class="adderss">
				<view class="numbox">开课时间</view>
				<view class="numinfo">
					<view class="time">
						<!-- <view v-for="(item,index) in info.time" :key="index">
							{{dateFormat(item.start_time)}} - {{dateFormat(item.end_time)}}
						</view> -->

						<view>{{info.course_time.start_day}} 至 {{info.course_time.end_day}}</view>
						<!-- <view style="margin-top: 12rpx;">结束：{{info.course_time.end_day}} {{info.course_time.end_time_day}}</view> -->
					</view>
				</view>
			</view>
			<view class="adderss" :style="{'margin-bottom':info.time_arr.length>1?'10rpx':''}">
				<view class="numbox">上课时间</view>
				<view class="weekbox">
					<view v-for="(item,index) in info.time_arr" :key="index">
						每周{{week[item.week]}} {{timeFormat(item.start_day)}} ~ {{timeFormat(item.end_day)}}
					</view>
				</view>

			</view>
			<view class="adderss">
				<view class="numbox">地址</view>
				<view class="numinfo" @click="tomaps()">
					<image src="../../static/dw1.png"></image>{{info.address}}{{info.detail_address}}
				</view>
			</view>
			<view class="adderss" style="margin-top: 20rpx;">
				<view class="numbox">详细地址</view>
				<view class="numinfo">{{info.detail_address}}</view>
			</view>
		</view>
		<view class="textbox">
			<view>授课老师</view>
		</view>
		<view class="teacherinfo">
			<image v-if="info.avator" :src="info.avator.split(',')[0]"></image>
			<view class="namebox">
				<view class="name">{{info.teacher_name}}</view>
				<view class="type">主讲老师</view>
			</view>
		</view>
		<view class="textbox" style="margin-top: 24rpx;">
			<view>课程评价({{info.evaluate_count||0}})</view>
			<view class="more" @click="more()">
				更多
				<image src="../../static/jt1.png"></image>
			</view>
		</view>
		<comment :list="info.evaluate"></comment>
		<view style="margin-top: 24rpx;" v-if="info && info.video">
			<view class="textbox">
				<view>视频展示</view>
			</view>
			<video :src="info.video" controls="true" autoplay="true" style="width: 100%;"></video>
		</view>
		<view class="textbox" style="margin-top: 24rpx;">
			<view>课程详情</view>
		</view>
		<uParse :content="content"></uParse>
		<!-- <view v-html="content" style="background-color: #FFF;"></view> -->
		<view style="height: 130rpx;"></view>
		<view class="navbut">
			<view class="kfbox">
				<image src="../../static/kf.png"></image>
				<view>客服</view>
				<button open-type="contact"></button>
			</view>
			<view class="butbox" @click="tosign()" :style="{
				opacity:overflowTime()?0.5:1
			}">立即报名</view>
		</view>
	</view>
</template>

<script>
	import comment from '../../components/comment.vue'
	import uParse from '@/components/gaoyia-parse/parse.vue'
	export default {
		components: {
			comment,
			uParse
		},
		data() {
			return {
				id: '',
				info: null,
				content: '',
				week: ['日','一', '二', '三', '四', '五', '六','日']
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getinfo()
		},
		methods: {
			overflowTime(){
				return Date.parse(new Date()) > this.info.sign_end_time*1000
			},
			getinfo() {
				this.$http({
					url: '/api/Course/detail',
					data: {
						id: this.id
					}
				}).then(res => {
					this.info = res.data
					this.info.evaluate = this.info.evaluate.splice(0, 2)
					this.content = res.data.content
					console.log(JSON.stringify(this.info))
				})
			},
			dateFormat: function(value) {
				console.log(value, 'vaie');
				var date = new Date(value * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var year = date.getFullYear();
				var month = ("0" + (date.getMonth() + 1)).slice(-2);
				var sdate = ("0" + date.getDate()).slice(-2);
				var hour = ("0" + date.getHours()).slice(-2);
				var minute = ("0" + date.getMinutes()).slice(-2);
				var second = ("0" + date.getSeconds()).slice(-2);
				// 拼接
				var result = year + "年" + month + "月" + sdate + "日 " + hour + ":" + minute //+ ":" + second;
				// 返回
				console.log(result, 'vaie');
				return result;
			},
			timeFormat: function(value) {
				var date = new Date(value * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var year = date.getFullYear();
				var month = ("0" + (date.getMonth() + 1)).slice(-2);
				var sdate = ("0" + date.getDate()).slice(-2);
				var hour = ("0" + date.getHours()).slice(-2);
				var minute = ("0" + date.getMinutes()).slice(-2);
				var second = ("0" + date.getSeconds()).slice(-2);
				// 拼接
				var result = hour + ":" + minute //+ ":" + second;
				// 返回
				return result;
			},
			//报名
			tosign() {
				if(this.overflowTime()){
					return
				}
				this.$http({ //是否绑定过社区
					url: '/api/Course/user_info',
				}).then(res => {
					this.myinfo = res.data
					////identity 1普通用户2志愿者3老师
					if (this.myinfo.community_id) {
						uni.navigateTo({
							url: '/pages/application/application?id=' + this.info.id + '&type=' +
								2 //1活动，2课程
						})
					} else {
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/selectcommunity/selectcommunity'
							})
						}, 100)
					}
				})
			},
			more() {
				uni.navigateTo({
					url: '/pages/commentlist/commentlist?id=' + this.info.id
				})
			},
			onShareAppMessage(res) {
				if (res.from === 'button') { // 来自页面内分享按钮
					console.log(res.target)
				}
				// return {
				//   title: "邀请好友",
				//   path: '/pages/index/index?pid='+this.id
				// }
			},
			onShareTimeline() {
				return {
					title: '快乐生活，就到众享幸福家',
					path: "/pages/coursesinfo/coursesinfo?id=" + this.id
				}
			},
			tomaps() {
				uni.navigateTo({
					url: '/pageshop/maps/maps?longitude=' + this.info.longitude + '&latitude=' + this.info
						.latitude + '&address=' + this.info.address
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.swiper {
		width: 750rpx;
		height: 460rpx;
		background: #FFF;

		.swiper-item {
			display: block;
			height: 460rpx;
			line-height: 300rpx;
			text-align: center;

			image {
				width: 750rpx;
				height: 460rpx;
			}
		}
	}

	.info {
		width: 690rpx;
		padding: 40rpx 30rpx;
		// height: 308rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 20rpx 20rpx;

		.namebox {
			font-size: 48rpx;
			font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
			font-weight: normal;
			color: #222222;
			-webkit-line-clamp: 2;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.infobox {
			display: flex;
			align-items: center;
			margin-top: 20rpx;

			.tipbox {
				// width: 68rpx;
				height: 38rpx;
				padding: 0 10rpx;
				background: linear-gradient(180deg, #FCBB8C 0%, #FF8158 100%);
				border-radius: 4rpx 8rpx 8rpx 8rpx;
				line-height: 38rpx;
				text-align: center;
				margin-right: 18rpx;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
	}

	.actinfo {
		width: 690rpx;
		padding: 20rpx 30rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 24rpx 0;

		.adderss {
			width: 690rpx;
			display: flex;
			align-items: center;

			// height: 80rpx;
			.numbox {
				width: 188rpx;
				font-size: 32rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #666666;
				margin-right: 30rpx;
			}

			.weekbox {
				width: 502rpx;
				font-size: 32rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #222222;
			}

			.numinfo {
				width: 502rpx;
				font-size: 32rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #222222;

				image {
					width: 26rpx;
					height: 28rpx;
					margin-right: 8rpx;
				}

				// >view{
				// 	width: fit-content;
				// 	height: 56rpx;
				// 	background: #FFF9FA;
				// 	border-radius: 8rpx;
				// 	padding: 0 14rpx;
				// 	line-height: 56rpx;
				// }
				.time {
					width: 530rpx;
					font-size: 32rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #333333;
					margin: 20rpx 0;

					>view {
						// height: 56rpx;
						background: #FFF9FA;
						border-radius: 8rpx;
						width: fit-content;
						padding: 0 14rpx;
						// line-height: 56rpx;
						font-size: 32rpx;
						font-family: Source Han Sans CN-Medium, Source Han Sans CN;
						font-weight: 500;
						color: #222222;
					}
				}
			}
		}
	}

	.textbox {
		width: 690rpx;
		padding: 0 30rpx;
		height: 120rpx;
		line-height: 120rpx;
		font-size: 40rpx;
		font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
		font-weight: normal;
		color: #FF6178;
		background-color: #FFF;
		display: flex;
		justify-content: space-between;

		.more {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #888888;

			image {
				width: 11rpx;
				height: 19rpx;
				margin-left: 12rpx;
			}
		}
	}

	.teacherinfo {
		background-color: #FFF;
		width: 690rpx;
		padding: 0 30rpx 40rpx 30rpx;
		display: flex;
		align-items: center;

		image {
			width: 100rpx;
			height: 100rpx;
			margin-right: 20rpx;
			border-radius: 100%;
		}

		.namebox {
			font-size: 32rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #222222;

			.name {
				-webkit-line-clamp: 1;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.type {
				font-size: 28rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #555555;
			}
		}
	}

	.navbut {
		width: 750rpx;
		height: 110rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;

		.kfbox {
			width: 168rpx;
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #444444;
			text-align: center;
			position: relative;

			image {
				width: 56rpx;
				height: 56rpx;
			}

			>button {
				width: 168rpx;
				height: 90rpx;
				position: absolute;
				opacity: 0;
				border: none;
				// z-index: 99;
				top: 0;
			}
		}

		.butbox {
			width: 552rpx;
			height: 90rpx;
			background: #FF8A9B;
			border-radius: 46rpx;
			font-size: 30rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 90rpx;
			text-align: center;
		}
	}

	video {
		width: 100vw !important;
	}
</style>